.article {
    height: 100vh;
    overflow: auto;
    .totalCard {
        height: 226px;
        margin-top: 80px;
        background-image: url("http://assets.dtstack.com/UEDLanding/Article/article_bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        font-size: 16px;
        text-align: center;
        font-family: PingFangSC-Medium, PingFang SC;
        img{
            width: 61px;
            margin-top: 40px;
            margin-bottom: 24px;
        }
        h1{
            font-size: 20px;
            color: #3D446E;
        }
        p {
            font-size: 12px;
            font-weight: 400;
            color: #8B8FA8;
            line-height: 20px;
        }
    }
    @media screen and (max-width: 750px){
        .totalCard {
            margin-top: 180px;
            height: 318px;
            background-image: url("http://assets.dtstack.com/UEDLanding/H5/articleBg.png");
            img {
                margin-top: 60px;
                margin-bottom: 30px;
            }
        }
    }
    .articleContent {
        background: #F7FBFD;

        .articleContentBox {
            width: 85%;
            margin: 0px auto;
            padding-top: 22px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            position: relative;
            .leftBox {
                flex: 1;
                max-width: 1200px;
                margin: 0 20px 20px 0;
                background: #FFFFFF;
            }
            .rightBox {
                .tagBox {
                    width: 220px;
                    background: #FFFFFF;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 20px;
                    color: #3D446E;
                    .title {
                        font-size: 16px;
                        font-family: MiSans-Medium, MiSans;
                        font-weight: 500;
                        line-height: 22px;
                        width: 100%;
                        padding-bottom: 20px;
                    }
                    .tagItem {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        padding: 6px 16px;
                        border-radius: 16px;
                        border: 1px #eee solid;
                        margin: 0 10px 10px 0;
                        user-select: none;
                        cursor: pointer;
                    }
                    .tagItemActive {
                        color: rgb(19, 183, 243);
                        border: 1px rgb(19, 183, 243) solid;
                    }
                }
                .originBox {
                    width: 220px;
                    background: #FFFFFF;
                    color: #3D446E;
                    margin: 20px 0;
                    padding: 20px;
                    .title {
                        font-size: 16px;
                        font-family: MiSans-Medium, MiSans;
                        font-weight: 500;
                        line-height: 22px;
                        width: 100%;
                        padding-bottom: 20px;
                    }
                    .originItem {
                        display: block;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #1D78FF;
                        line-height: 24px;
                        margin-bottom: 20px;
                        img {
                            margin-right: 11px;
                            margin-bottom: 2px;
                        }
                    }
                }
            }

            .sortBox {
                border-bottom: 1px solid #EBECF0;
                height: 53px;
                line-height: 53px;
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                .title {
                    color: #3D446E;
                    font-size: 16px;
                    font-weight: 600;
                }
                .typeSpace {
                    color: #3D446E;
                    cursor: pointer;
                }
            }

            .articleBox {
                .articleItem {
                    padding: 20px;
                    border-bottom: 1px #eee solid;
                    font-family: PingFangSC-Regular, PingFang SC;
                    &:last-child {
                        border-bottom: none;
                    }
                    .title {
                        color: #3D446E;
                        font-size: 16px;
                        font-weight: 500;
                        user-select: none;
                        cursor: pointer;
                        display: inline;
                        &:hover {
                            color: #1e80ff;
                        }
                    }
                    .content {
                        margin: 16px 0;
                        color: #64698B;
                        white-space: normal;
                        overflow: hidden; // 超出的文本隐藏
                        text-overflow: ellipsis;    // 溢出用省略号显示
                        display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
                        -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
                        -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
                    }
                    .row {
                        display: flex;
                        color: #8B8FA8;
                        white-space: nowrap;
                        img {
                            margin-right: 8px;
                            margin-bottom: 2px;
                        }
                        .username {
                            padding: 0 10px 0 20px;
                            user-select: none;
                            cursor: pointer;
                            color: #64698B;
                            text-decoration: none;
                        }
                        .viewCount {
                            flex: 1;
                            text-align: right;
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width: 750px){
        .articleContent {
            .articleContentBox {
                width: 92%;
                .leftBox {
                    margin-right: 0;
                }
                .rightBox {
                    display: none;
                }
                .sortBox{
                    .sortElement {
                        display: flex;
                        width: 245px;
                        justify-content: space-between;
                    }
                }
            }
        }
    }

    :global {
        .ant-back-top {
            display: flex;
            align-items: center;
            justify-content: center;
            .anticon {
                font-size: 25px;
                color: #8B8FA8;
                background-color: #fff;
                padding: 10px;
                border-radius: 50%;
                &:hover {
                    color: #1D78FF;
                }
            }
        }
    }
    @media screen and (max-width: 750px){
        .articleContent {
            .articleContentBox {
                width: 92%;
                .leftBox {
                    margin-right: 0;
                }
                .rightBox {
                    display: none;
                }
            }
        }
    }
}

.typeMenu {
    width: 90px;
    height: 100px;
    border-radius: 6px;
    text-align: center;
    letter-spacing: 1px;
    :global {
        .ant-dropdown-menu-item:first-child {
            margin-top: 6px;
        }
        .ant-dropdown-menu-item {
            line-height: 32px;
        }
        .ant-dropdown-menu-item:hover {
            background: #F1F9FE;
        }
    }
}
